<template>
	<view class="index">
		<u-sticky >
			<u-notice-bar v-if="notice" text="有新订单了，请查看!" ></u-notice-bar>
		</u-sticky>
		<view class="p32" style="color: #fff;">
			<u-subsection :list="tabs.list" :current="tabs.current" @change="sectionChange"></u-subsection>
		</view>
		<view class="order" v-for="(item, index) in list" :key="item.id">
			<view class="top" @click="goUrl('./detail?id=' + item.id)">
				<view class="left">
					{{ item.createTime }}
					<view class="ml16 t20 titalic c-tips bground">{{orderTypeStr(item.orderType)}}</view>
				</view>
				<view class="right" @click="sendMessage()">{{ mapStatus.get(item.status.toString()) }}</view>
			</view>
			<view class="mt32 flex">
				<view>发单人: </view>
				<view>{{ item.senderName }}</view>
				<u-icon name="phone" color="#2979ff"  size="48rpx" @click="tapCall(item.handlerPhone)" class="ml32"></u-icon>
			</view>
			<view class="mt32 flex">
				<view>物品: {{ item.goodsName }}</view>
				<view class="ml64">预计重量: {{ item.goodsWeight }}KG</view>
			</view>
			<view class="mt32 flex">
				<view>发件地址: </view>
				<view>{{ item.senderProvince }}{{ item.senderCity }}{{ item.senderRegion }}{{ item.senderDetailAddress }}</view>
			</view>
			<view class="mt32 flex">
				<view>收件地址: </view>
				<view>{{ item.receiverProvince }}{{ item.receiverCity }}{{ item.receiverRegion }}{{ item.receiverDetailAddress }}</view>
			</view>
			<view class="mt32">
				<u-button type="success" @click="goUrl('./take?id='+item.id)">接 单</u-button>
			</view>
		</view>

		<!-- <u-empty :v-if="!list || list.length == 0" ></u-empty> -->
		<u-loadmore :status="status" loading-text="努力加载中" loadmore-text="" nomore-text=""/>
	</view>
</template>



<script>
	//const MQTT = require('mqtt/dist/mqtt.min.js')
	const MQTT = require("mqtt");
	export default {
		data() {
			return {
				notice:true,
				tabs:{
					list: ['筹展', '撤展'],
					current: 0
				},
				status: 'loadmore',
				page:1,
				list:[],
				mapStatus: new Map([
				  ["0","待接单"],
				  ["1","已接单"],
				  ["2","运输中"],
				  ["3","已完成"],
				  ["99","已评价"],
				]),
			}
		},
		onLoad(e) {
			
		},
		onShow() {
			// const refreshIndex = uni.getStorageSync('refreshIndex')
			// if (refreshIndex) {
				// this.onPullDownRefresh()
			// 	uni.removeStorageSync('refreshIndex')
			// }
			this.page = 1
			this._getData()
		},
		created() {},
		onReachBottom() {
			this.status = 'loading';
			this.page++
			this._getData()
		},
		onPullDownRefresh() {
			this.page = 1
			this._getData()
			uni.stopPullDownRefresh()
		},
		methods: {
			orderTypeStr(orderType) {
				switch (orderType) {
					case 11:
						return '筹展'
						break;
					case 12:
						return '撤展'
						break;
					case 21:
						return '筹展'
						break;
					case 22:
						return '撤展'
						break;
					case 31:
						return '筹展'
						break;
					case 32:
						return '撤展'
						break;
					default:
						return ' '
						break;
				}
			},
			async _getData() {
				uni.showLoading({
					title: ''
				})
				const res = await this.$wxapi.orderListWuliu({
					token: this.token,
					pageNum: this.page,
					pageSize: 5,
					type: (this.tabs.current==0)?21:22
				})
				uni.hideLoading()
				if (res.code == 200) {
					if (this.page == 1) {
						this.list.length = 0;
						this.list = res.data 
					} else {
						if (res.data) {
							this.list = this.list.concat(res.data)
						} else {
							this.status = 'nomore';
							uni.showToast({
								title: '没有更多了～',
								icon: 'none'
							})
						}
					}
				}
			},
			tapSubmit(index) {

			},
			tapCall(value) {
				uni.makePhoneCall({
					phoneNumber: value
				})
			},
			goUrl(url) {
				if (url) {
					uni.navigateTo({
						url
					})
				}
			},
			sectionChange(index) {
				this.tabs.current = index;
				
				this.page = 1
				this._getData()
			},
			sendMessage() {
				
			  // 调用发送消息的方法
			  //this.sendToRabbitMQ('Hello, RabbitMQ!');
				let options = {
					username: 'guest',
					clientId: 'guest',
					connectTimeout: 600000,
					keepalive: 5, // 心跳，单位秒，如果后台开启监听可以快速知道有没有退出
					clean: true,
					// password: '',
					// reconnectPeriod: 5000,
				}
				// 订阅 topic。如果订阅多个 var subscribe = ["test1","test2"]
				var subscribe = "orderadd"
				if(this.client){ 
					this.client.end()
				}
				// #ifdef APP-PLUS
					this.client = MQTT.connect('wx://114.115.223.103:1883',options)  
				// #endif
				// #ifdef H5
					this.client = MQTT.connect('mqtt://114.115.223.103:1883',options)  
				// #endif
				this.client.on('connect', (res)=>{  
					console.log(res,1111);
					uni.hideLoading()
					uni.showToast({  
						title:"连接成功",  
						duration:2000,  
						icon:"none"  
					})
					this.client.subscribe(subscribe , (err)=>{  
						console.log(err,2222);
						if (!err) {  
							uni.showToast({  
								title:"订阅成功",  
								duration:2000,  
								icon:"none"  
							})  
						}  
					})  
				}).on('message', (topic, message)=>{  
					console.log(topic,message)  
				}).on('reconnect', (topic, message)=>{  
					uni.showLoading({
						title: '重连中...'
					})
					console.log("重连")  
					// this.client.publish('orderadd','hello',{},(res)=>{
					// 		console.log(res)
					// })
				}).on('error',()=>{
					//重新连接
					client.reconnect()
				})
				// close： function () {} 断开连接回调
				// offline ： function () {} 客户端离线回调
				// 发送，
				// this.client.publish('orderadd','hello',{},(res)=>{
				// 		console.log(res)
				// })
				//  system: topic订阅的主题,第二个参数发送内容Buffer or String类型(可以转成JSON字符串JSON.stringify()),第三个参数[options]看下方【不必填】,第四个回调【不必填】
				// 	qos QoS 等级, Number, default 0
				//	retain 保留消息标志, Boolean, default false
				//	dup 重复标志, Boolean, default false
					
			},
			sendToRabbitMQ(message) {
			  // 假设你已经引入了RabbitMQ的JavaScript客户端库，如amqplib
			  const client = new AMQP.Client('ws://localhost:15672/api/'); // 连接到RabbitMQ管理界面
			  client.connect().then(() => {
				const channel = client.createChannel();
				channel.assertQueue('queue_name', { durable: true }).then(() => { // 确保队列存在
				  channel.sendToQueue('queue_name', Buffer.from(message)); // 发送消息到队列
				  client.close(); // 关闭连接
				});
			  });
			}
		}
	}
</script>
<style scoped lang="scss">
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border: 1rpx solid $u-info-light;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 40rpx;
	font-size: 28rpx;

	.top {
		display: flex;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;

			.store {
				margin: 0 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.right {
			color: $u-warning-dark;
		}
	}

	.item {
		display: flex;
		margin: 20rpx 0 0;

		.left {
			margin-right: 20rpx;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}

		.content {
			flex: 1;

			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}

			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}

			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}

		.right {
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;

			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}

			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}

	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;

		.total-price {
			font-size: 32rpx;
		}
	}

	.bottom {
		display: flex;
		margin-top: 40rpx;
		padding: 0 10rpx;
		justify-content: flex-end;
		align-items: center;

		.btn {
			line-height: 52rpx;
			width: 160rpx;
			border-radius: 26rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: $u-info-dark;
		}

		.evaluate {
			color: $u-warning-dark;
			border-color: $u-warning-dark;
		}
	}
}

.bground {
	border: 1rpx solid $u-info-light;
	border-radius: 40rpx;
	padding: 6rpx 20rpx;
}

</style>
